import React, { useState, FC } from 'react';
import { Table } from '@/components';
import { TableUtils } from '@/utils';
import { Modal, Divider } from 'antd';

const { getColumns } = TableUtils;
const { confirm } = Modal;

interface ListProps {}

const List: FC<ListProps> = (props: any) => {
  const { spinning, fields, pagination, list, onChange, actions }: any = props;
  const paginationProps = {
    ...pagination,
    showTotal: (tc: number) => `总共 ${tc} 条`,
  };

  // 禁用
  const del = () => {
    Modal.confirm({
      title: '确认禁用吗？',
      okType: 'danger',
      centered: true,
      onOk() {
        console.log('OK');
      },
    });
  };
  const disableData = (isOk?: boolean) => {
    if (isOk) {
      // 进行启用
      confirm({
        title: '确认取消禁用吗？',
        content: '取消后会自动刷新数据',
        okType: 'danger',
        centered: true,
        onOk() {
          actions.fetchList();
        },
      });
    } else {
      confirm({
        title: '确认禁用吗？',
        content: '取消后会自动刷新数据',
        okType: 'danger',
        centered: true,
        onOk() {
          actions.fetchList();
        },
      });
    }
  };
  const extraColumns = [
    {
      key: 'operate',
      name: '操作',
      width: 120,
      fixed: 'right',
      render: (text: any, { id, status, skuCode }: any) => {
        return (
          <>
            {id ? (
              <a href={`/goods/posManage/handle/edit/${skuCode}`}>修改</a>
            ) : (
              <a href={`/goods/posManage/handle/add/${skuCode}`}>添加</a>
            )}
            <Divider type="vertical" />
            <a
              onClick={() => {
                disableData();
              }}
              style={{
                color: '#ff4d4f',
              }}
            >
              禁用
            </a>
            {/* <Divider type="vertical" /><span className="linkBtn" onClick={del}>禁用</span> */}
          </>
        );
      },
    },
  ];

  const tableProps = {
    scroll: { x: 1200 },
    rowKey: 'skuCode',
    columns: getColumns(fields)
      .extend(extraColumns)
      .values(),
    loading: spinning,
    dataSource: list,
    pagination: paginationProps,
    style: {
      marginTop: 20,
    },
    onChange,
  };

  return (
    <>
      <Table {...tableProps} />
    </>
  );
};

export default List;
